<template>
	<view class="layer" :style="'padding-top:' + (headerHight) + 'px'" >
		<view class="top-bg"></view>
		<!-- header -->
		<view class="header" :style="'top:' + statusBarHeight + 'px'">
			<view class="left">
			</view>
			<text class="title">{{info.blogname}}</text>
			<view class="right"></view>
		</view>
		
		<view class="content-layer" v-if="info">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrollBottom()">
				<!-- 搜索 -->
				<view class="serach p-24" v-if="commonUrl">
					<view class="logo" @click="mapBtn()">
						<image class="img" mode="aspectFit" :src="commonUrl + '/logo.png'"></image>
					</view>
					<u-search placeholder="请输入关键词" v-model="keyword" :disabled="false" :showAction="true" :animation="true" @custom="search()" @search="search()"></u-search>
				</view>
				<!-- 轮播图 -->
				<view class="banner-layer p-24">
					<u-swiper
						:list="info.banner"
						keyName="img"
						showTitle
						:autoplay="true"
						circular
						@click="bannerBtn"
					></u-swiper>
				</view>
				<!-- 推荐文章 -->
				<view class="recommend-layer p-24">
					<!-- <view class="recommend-title">文章推荐</view> -->
					<view class="recommend-box">
						<view class="recommend-list" v-for="(item,index) in info.tui" @click="goDetails(item.id)">
							<image class="img" mode="aspectFill" :src="item.img" :lazy-load="true"></image>
							<text class="title ellipsis">{{item.title}}</text>
						</view>
					</view>
				</view>
				<!-- 文章列表 -->
				<view class="article-layer">
					<!-- 通知公告 导航菜单 -->
					<view class="nav-layer">
						<u-notice-bar v-if="info.shareintro" :text="info.shareintro" bgColor="#fff"></u-notice-bar>
						<u-tabs :list="info.cates" @click="navBtn"></u-tabs>
					</view>
					<!-- 列表 -->
					<view class="article-box p-24">
						<view class="article-list" v-for="(item,index) in articleList" :key="index" @click="goDetails(item.ID)">
							<view class="article-info" :class="item.Thumb ? '' : 'article-info-active'">
								<text class="article-title line-two">{{item.Title}}</text>
								<view class="article-m">
									<text class="span">发布于{{item.NewTime}}</text>
									<text class="span">热度{{item.ViewNums}}</text>
								</view>
							</view>
							<image class="img" mode="aspectFill" v-if="item.Thumb" :src="item.Thumb" :lazy-load="true"></image>
						</view>
					</view>
					<u-loadmore 
						:status="status" 
						:loading-text="loadingText"
						:loadmore-text="loadmoreText" 
						:nomore-text="nomoreText" 
					/>
				</view>
			</scroll-view>
		</view>
		<u-loading-page :loading="!info" iconSize="60" loadingText="正在努力加载中..." loading-mode="spinner"></u-loading-page>
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
  	import shareMixin from '@/common/mixins/shareMixin.js';
	import { homeApi,listApi } from 'static/services/mineServices';
	import { toDate,setStorageData,getStorageSyncData } from 'static/resource/until.js';
	export default {
    	mixins: [shareMixin],
		data() {
			return {
				keyword: '', // 搜索关键词
				articleList: [], // 文章列表
				getData: {
					page: 1,
					cate_id: ''
				},
				listInfo: '',
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			}
		},
		onShow(){
		},
		onLoad() {
			this.init();
		},
		methods: {
			init(){
				if(this.getData.page == '1'){
					// 获取缓存
					this.info = getStorageSyncData('homeInfo') ? JSON.parse(getStorageSyncData('homeInfo')) : '';
					this.articleList = getStorageSyncData('homeList') ? JSON.parse(getStorageSyncData('homeList')) : [];
				}
				this.homeApi();
				this.listApi(this.getData);
			},
			// 文章列表
			listApi(val){
				this.status = 'loading';
				listApi(val).then(res=>{
					if(res){
						for(let i in res.list){
							if(!res.list[i].NewTime){
								res.list[i].NewTime =  toDate(res.list[i].UpdateTime,1).substring(0,10);
							}
							if(!res.list[i].Thumb && this.isImg == '1'){
								res.list[i].Thumb =  this.commonUrl + 'ly_autoimg/' + res.list[i].ID + '.jpg';
							}
						}
						
						if(this.getData.page == '1' && !this.getData.cate_id){
							// 对首页列表第一页进行缓存
							setStorageData('homeList',JSON.stringify(res.list));
							this.articleList = [];
						}
						
						this.articleList = this.articleList.concat(res.list);
						this.listInfo = res.pagebar;
						if(this.getData.page >= res.pagebar.PageAll){
							this.status = 'nomore';
						} else {
							this.status = 'loadmore';
						}
					}
				})
			},
			// 点击分类
			navBtn(val){
				this.articleList = [];
				this.getData = {
					page: 1,
					cate_id: val.id
				}
				this.listApi(this.getData);
			},
			// 无限滚动触发
			scrollBottom(){
				this.status = 'loading';
				if(this.getData.page >= this.listInfo.PageAll){
					this.status = 'nomore';
					return
				}
				this.getData.page++; // 页面加加
				this.listApi(this.getData); // 获取列表
			},
			// 跳转详情
			goDetails(val){
				this.goPage('/subPackages/details/index?_swebfr=0&id=' + val);
			},
			// 点击轮播图
			bannerBtn(e){
				this.goDetails(this.info.banner[e].id);
			},
			// 搜索
			search(){
				this.goPage('/subPackages/search/index?key=' + this.keyword);
			},
			// 跳转地图
			mapBtn(){
				if(this.projectStatus == '1'){
					this.goPage('/subPackages/swan-sitemap/index');
				}
			}
		},
		// 分享
		onShareAppMessage(res) {
				return {
				  title: this.info.shareintro,
				}
		},
		//分享到朋友圈
		onShareTimeline(res) {
				 return {
				  title: this.info.shareintro,
				}
		},
	}
</script>

<style>
	/* 去除返回顶部按钮的默认背景颜色 */
	.u-transition.u-fade-enter-to.u-fade-enter-active {
		background-color: rgba(0,0,0,0)!important;
	}
</style>
<style lang="scss" scoped>
.layer{
	width: 100%;
	height: 100%;
	background: #fff;
	.content-layer{
		width: 100%;
		height: 100%;
		overflow: hidden;
		// padding: 24rpx;
		box-sizing: border-box;
		// position: relative;
		.serach{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.logo{
				width: 200rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 12rpx;
				box-sizing: border-box;
			}
		}
		.banner-layer{
			width: 100%;
			padding-top: 8rpx;
			box-sizing: border-box;
		}
		.recommend-layer{
			width: 100%;
			margin: 24rpx 0;
			.recommend-title{
				color: #000;
				font-size: 36rpx;
				line-height: 48rpx;
				font-weight: bold;
				padding: 8rpx 0;
				box-sizing: border-box;
				-webkit-box-reflect: below -20rpx linear-gradient(rgba(255,255,255,0) 14%, rgba(255,255,255,.4) 95%);
			}
			.recommend-box{
				width: 100%;
				display: flex;
				overflow: hidden;
				overflow-x: scroll;
				.recommend-list{
					width: 280rpx;
					height: 180rpx;
					overflow: hidden;
					position: relative;
					margin-right: 16rpx;
					flex-shrink: 0;
					border-radius: 15rpx 15rpx 0 0;
					.img{
						max-width: 100%;
						max-height: 100%;
					}
					.title{
						color: #fff;
						font-size: 24rpx;
						line-height: 36rpx;
						width: 100%;
						background: rgba(0,0,0,.6);
						position: absolute;
						bottom: 0;
						left: 0;
						padding: 0 6rpx;
						box-sizing: border-box;
					}
				}
			}
		}
		.article-layer{
			width: 100%;
			background: #fff;
			padding-bottom: 48rpx;
			box-sizing: border-box;
			.nav-layer{
				width: 100%;
			}
			.article-box{
				width: 100%;
				.article-list{
					width: 100%;
					height: 180rpx;
					overflow: hidden;
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					margin: 16rpx 0;
					box-shadow: 0px 5px 10px rgba(0,0,0,.1);
					padding: 10rpx;
					box-sizing: border-box;
					.img{
						width: 40%;
						height: 100%;
						flex-shrink: 0;
					}
					.article-info{
						width: 60%;
						height: 100%;
						padding: 14rpx 14rpx 14rpx 24rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.article-title{
							color: #000;
							font-size: 28rpx;
							line-height: 36rpx;
							width: 100%;
						}
						.article-m{
							width: 100%;
							display: flex;
							.span{
								color: rgba(0,0,0,.5);
								font-size: 24rpx;
								line-height: 36rpx;
								padding-right: 16rpx;
								box-sizing: border-box;
							}
						}
					}
					.article-info-active{
						width: 100%;
					}
				}
				
			}
		}
	}
	.p-24{
		padding: 0 24rpx;
		box-sizing: border-box;
	}
}
	
</style>
